<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>PrivateTeacherRservationSystem</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta http-equiv="Access-Control-Allow-Origin" content="*">
  <!-- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> -->
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="format-detection" content="telephone=no">
  <link rel="icon" href="images/ysu.png">
  <link rel="stylesheet" href="lib/layui-v2.6.3/css/layui.css" media="all">
  <script src="lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
  <script src="lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
  <script src="lib/jq-slideVerify.js"></script>
  <script src="lib/sign%20up.js"></script>
  <script type="text/javascript" src="http://pv.sohu.com/cityjson?ie=utf-8"></script>  <!-- 搜狐接口获取ip以及地点信息 -->

  <style>
    html,
    body {
      width: 100%;
      height: 100%;
      overflow: hidden
    }
    body {
      background-image: url(images/bg2.jpg);
      background-size: 100% 100%;
      position: relative;
    }

    .admin-login-background {
      width: 360px;
      height: 100%;
      position: relative;
      left:  65%;
      top: 160px;
    }

    .login-form {
      background-color: #fff;
      border: 1px solid #fff;
      border-radius: 3px;
      padding: 14px 20px;
      box-shadow: 0 0 8px #eeeeee;
      /*opacity: 0.8;*/
      border-radius: 10px;
    }

    .logo-title {
      text-align: center;
      letter-spacing: 2px;
      padding: 14px 0;
    }

    .logo-title h1 {
      color:#0d0c22;font-size:25px;font-weight:bold;
    }


    .layui-form-item {
      position: relative;
      text-align: center;
    }

    .layui-form-item label {
      position: absolute;
      left: 1px;
      top: 1px;
      width: 38px;
      line-height: 36px;
      text-align: center;
      color: red;
      opacity: 0.5;
    }

    .layui-form-item input {
      padding-left: 36px;
    }

  </style>
</head>

<body>
<div class="layui-container">
  <div class="admin-login-background">
    <div class="layui-form login-form">
      <form class="layui-form" action="" method="post">
        <div class="layui-form-item logo-title col">

          <h1>Sign up</h1>
        </div>
        <div class="layui-form-item">
          <label class="layui-icon layui-icon-username" for="nikename"></label>
          <input type="text" name="nikename" id="nikename" lay-verify="nikename" placeholder="Name" autocomplete="off" class="layui-input" >
        </div>
        <div class="layui-form-item">
          <label class="layui-icon layui-icon-email" for="email"></label>
          <input type="password" id="email" name="email" lay-verify="email" placeholder="Email" autocomplete="off" class="layui-input" >
        </div>
        <div class="layui-form-item">
          <label class="layui-icon layui-icon-cellphone" for="tel"></label>
          <input type="password" id="tel" name="tel" lay-verify="tel" placeholder="Phone" autocomplete="off" class="layui-input" >
        </div>
        <div class="layui-form-item">
          <label class="layui-icon layui-icon-password" for="passwd"></label>
          <input type="password" id="passwd" name="passwd" lay-verify="passwd" placeholder="Password" autocomplete="off" class="layui-input" >
        </div>
        <div class="layui-form-item">
          <label class="layui-icon layui-icon-password" for="passwd2"></label>
          <input type="password" id="passwd2" name="passwd2" lay-verify="passwd2" placeholder="Password again" autocomplete="off" class="layui-input" >
        </div>




        <div class="layui-form-item">
          <button class="layui-btn layui-btn-radius layui-btn-normal " style="background-color: #0080ff;" lay-submit="" lay-filter="login" >Create an Account</button>
        </div>

      </form>
    </div>
  </div>
</div>
</body>

</html>